<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单管理-车速递</title>
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/css/mymain.mymain.css">
    <script type="application/javascript" src="../static/js/jquery-3.3.1.js"></script>
    <script type="application/javascript" src="../static/js/bootstrap.min.js"></script>
    <script type="application/javascript" src="../static/layui/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body style="position: static">

<div id="app" class="bgGray">
    <div data-v-95ac8d30="" class="header3">
        <div data-v-95ac8d30="" class="layout clear">
            <div data-v-95ac8d30="" class="left logo">
                <a data-v-95ac8d30="" href="index.html">
                    <img data-v-95ac8d30="" src="">
                </a>
            </div> <div data-v-95ac8d30="" class="header3Nav right">|<a data-v-95ac8d30="" href="mymain.html">我的订单</a>|<a data-v-95ac8d30="" href="helpCenter.html">帮助中心</a>|<a data-v-95ac8d30="" href="/loginout">退出</a>
        </div>
            <div  class="header3User right" id="username">
                <i data-v-95ac8d30="" class="iconfont icon-phone"></i>
            <span data-v-95ac8d30="" class="sp1">400-919-8000</span>
            <span data-v-95ac8d30="" class="sp2">欢迎您，{{username}}</span>
            <span data-v-95ac8d30="" class="sp3"></span>
        </div>
        </div>
    </div>
    <div class="userInfo">
        <div class="layout">
            <div class="userInfoCom clear">
                <div class="userInfoL left">
                    <div data-v-1cae2c34="" class="userNav">
                        <dl data-v-1cae2c34="" class="userMsg">
                            <dt data-v-1cae2c34="">
                                <img data-v-1cae2c34="" src="">
                            </dt>
                            <dd data-v-1cae2c34="">
                                <p data-v-1cae2c34=""></p>
                                <p data-v-1cae2c34="" class="p5 pp" style="">普卡会员</p>
                            </dd>
                        </dl>
                        <ul data-v-1cae2c34="" class="manNav">
                            <li data-v-1cae2c34="">
                                <a data-v-1cae2c34="" href="" class="sel">订单管理</a>
                            </li>
                             <li data-v-1cae2c34="">
                                 <a data-v-1cae2c34="" href="myinfo.html" class="">个人信息</a>
                             </li>
                        </ul>
                    </div>
                </div>
                <div class="userInfoR right">

                    <div class="orderManage manage">
                        <div class="orderManageTit manageTit clear">
                            <div class="left tit">订单管理</div>
                            </div>
                        <div class="orderType clear type">
                            <div class="sel">全部订单</div>
                        </div>
                        <div class="orderList list">
                            <div class="orderListCom listCom" style="position: static;">
                                <table cellspacing="0" cellpadding="0">
                                    <tr class="firstTr">
                                        <th>订单号</th>
                                        <th>订单金额</th>
                                        <th>车型</th>
                                        <th style="width: 300px">取车地址</th>
                                        <th style="width: 300px">还车地址</th>
                                        <th>订单状态</th>
                                        <th>操作</th>
                                    </tr>
                                </table>
                                <div class="noData" id="noda">

                                    <table cellspacing="0" cellpadding="0">
                                        <tr class="firstTr" v-for="site in obj">
                                            <td>{{site.id}}</td>
                                            <td>{{site.oprice}}</td>
                                            <td>{{site.cname}}</td>
                                            <td style="font-size: 15px;width: 300px">{{site.getcity}}</td>
                                            <td style="font-size: 15px;width: 300px">{{site.backcity}}</td>
                                            <td>{{site.status}}</td>
                                            <td><a href="#" @click="deleteOrder(site.id)" style="color:red">删除</a></td>
                                        </tr>
                                    </table>

                                    <div style="text-align: center">
                                        <ul class="pagination">
                                            <li class="page-item ">
                                                <span style="cursor: pointer" class="page-link" v-on:click.prevent="changePage(0)">上页</span>
                                            </li>
                                            <li class="page-item ">
                                                <span  class="page-link" >第{{page}}页</span>
                                            </li>
                                            <li class="page-item ">
                                                <span style="cursor: pointer" class="page-link" v-on:click.prevent="changePage(-1)">下页</span>
                                            </li>
                                        </ul>
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-v-3aaf9db2="" class="footer2">
        <div data-v-3aaf9db2="" class="layout clear">
            <div data-v-3aaf9db2="" class="d1">
                <a data-v-3aaf9db2="" href="about.html">关于车速递</a></div></div></div>

   </div>

<script type="text/javascript">

    var daohang = new Vue({
        el:'#username',
        data:{
            username:'',
        },
        mounted:function (){
            $.ajax({
                url:'/loginName',
                type:'get',
                success:function (res){
                    daohang.username=res;
                }
            })
        }
    });



    var totalCount;
    var user;

    var vm = new Vue({
        el:'#noda',
        data:{
            page: 1,
            pages: 0,
            obj:[]
        },
        methods:{
            changePage: function (flag) {
                if (this.page < this.pages && flag == -1) {
                    this.page = this.page + 1;
                } else if (this.page > 1 && flag == 0) {
                    this.page = this.page - 1;
                }
                $.ajax({
                    url: '/orders',
                    data: {page: vm.page},
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        vm.obj = data.list;
                        vm.page = data.pageNum;
                    }
                })
            }
        }
    });

    $(function () {
        var order =loadData();


    })
    function loadData() {
        $.ajax({
            type:"GET",
            url:"/orders",
            success:function(data){
                vm.obj=data.list;
                vm.pages=data.pages;
            },
            error:function () {
                alert("ajax加载错误");
            }
        })
    }

    function deleteOrder(id){
        $.ajax({
            url: '/orderu'+id,
            type: 'DELETE',
            success: function (data) {
                if (data==true) {
                    for (let x of vm.obj) {
                        if (x.id == id){
                           vm.obj.splice(vm.obj.indexOf(x),1);
                        }
                    }
                }
            }
        })
    }


   /* layui.use(['laypage', 'layer'], function() {
        var laypage = layui.laypage
            , layer = layui.layer;

        //总页数大于页码总数
        laypage.render({
            elem: 'fenye'
            , count: totalCount //数据总数
            , limit:5
            , jump: function (obj, first) {
                var currentPage = obj.curr;
                loadData(currentPage);

            }
        });

    });
*/

</script>
</body>
</html>